<template>
  <div class="luans" style="color: white">
    <div class="contentDiv">
      <div class="topDiv">
        <div class="leftDiv">
          <div class="lefttop">
            <span class="stationName">
              念坛公园处理站
            </span>
            <div class="video" @click="videoClick"><img src="../../assets/images/video.png" alt="">视频查看</div>
            <div class="chaifen" @click="chaiClick"><img src="../../assets/images/chaifen.png" alt="">智能拆分</div>
            <div class="chaifen" @click="kongzhi"><img src="../../assets/images/chaifen.png" alt="">设备控制系统</div>
          </div>
          <div class="bottomSession">
            <p>
              管理员信息
            </p>
            <div class="sessionC">
              姓名：<span>{{name}}</span> 电话：<span>{{tel}}</span>  负责时间：<span>{{date}}</span> 运行情况：<span>{{status}}</span>
            </div>
          </div>
        </div>
        <div class="rightDiv" style="width: 15rem;">
          <el-select v-model="value" filterable placeholder="请选择"  @change="handleChange">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="bottomDiv">
        <div class="stationS">
          <div class="viewer">
            <div id="cesiumContainer"  ></div>
          </div>
        </div>
        <div class="stationDetail">
          <div class="jz">
            <div class="deStation">站点详情</div>
            <div class="backDetail">
              <div class="jichu">
                <span>基础数据</span>
                <p>总面积：<span class="colorS">{{area}}</span> 平方</p>
                <p>总设备：<span class="colorS">{{numTotal}}</span> 个   <span class="ml10">监测点：<span class="colorS">{{jianNum}}</span> 个</span>  </p>
              </div>
              <div class="sessDiv">
                <div class="firstDiv">
                  <img src="../../assets/images/icon/water.png" alt="">
                  <div>
                    <span class="colorS">70%</span><br>
                    <span>消毒剂总量</span>
                  </div>
                </div>
                <div class="firstDiv">
                  <img src="../../assets/images/icon/fuwu.png" alt="">
                  <div>
                    <span class="colorS">2000平方米</span><br>
                    <span>服务范围</span>
                  </div>
                </div>
                <div class="firstDiv">
                  <img src="../../assets/images/icon/waring.png" alt="">
                  <div>
                    <span class="colorS">20</span><br>
                    <span>报警总次数</span>
                  </div>
                </div>
              </div>
            </div>

          </div>

        </div>

      </div>
    </div>
    <div class="h100"  v-show="videoShow">
        <div class="tanDiv"></div>
        <div  class="diaStyle">
          <div class="xx" @click="hiddenTan"><img src="../../assets/images/xx.png" alt="" ></div>
          <div class="xxDiv">
              <div class="videoDiv">
<!--                <video src=""></video>-->
                <img src="../../assets/images/video1.png" style="width: 100%;height: 100%;" alt="">
              </div>
              <div class="videoList">
                <ul>
                  <li><img src="../../assets/images/video1.png" alt=""></li>
                  <li><img src="../../assets/images/video1.png" alt=""></li>
                  <li><img src="../../assets/images/video1.png" alt=""></li>
                  <li><img src="../../assets/images/video1.png" alt=""></li>
                </ul>
              </div>
          </div>
        </div>
      </div>

    <div class="h100"  v-show="chuShow">
        <div class="tanDiv"></div>
        <div  class="diaStyle">
          <div class="xx" @click="hiddenTan"><img src="../../assets/images/xx.png" alt="" ></div>
          <div class="xxDiv">
              <div class="videoDiv">
               212121
              </div>
              <div class="videoList">
                <ul>
                  <li><img src="../../assets/images/video1.png" alt=""></li>
                  <li><img src="../../assets/images/video1.png" alt=""></li>
                  <li><img src="../../assets/images/video1.png" alt=""></li>
                  <li><img src="../../assets/images/video1.png" alt=""></li>
                </ul>
              </div>
          </div>
        </div>
      </div>

    <div class="h101"  v-show="kongShow">
        <div class="tanDiv"></div>
        <div  class="diaStyle">

          <div class="xx" @click="hiddenTan"><img src="../../assets/images/xx.png" alt="" ></div>
          <div class="xxDiv">
            <div class="videoDiv">
              <div v-show="activeIndex === 4" class="logopage">
                <p class="titleSize">智能除臭消毒系统</p>
                <p class="titleC">当前运行模式：<el-button type="success">自动</el-button> <span class="ml5">当前登录人员：</span><span>唐莲</span> <span class="ml5">PLC通讯状态：</span><el-button type="success"> </el-button></p>
              </div>
              <div v-show="activeIndex === 0" class="userlogin">
                <div class="aviter">
                  <img src="../../assets/images/touxiang.png" alt="">
                  <span>负责人</span>
                </div>
                <div class="aviterSession">
                  <el-form :model="formuser" label-width="auto" style="max-width: 600px">
                    <el-form-item label="用户名">
                      <el-input v-model="formuser.name" />
                    </el-form-item>
                    <el-form-item label="注销方式">
                      <el-radio-group v-model="formuser.resource">
                        <el-radio value="0">超过登录时长</el-radio>
                        <el-radio value="1">超过空闲时长</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="空闲时长">
                      <el-col :span="22">
                        <el-input v-model="formuser.date1" />
                      </el-col>
                      <el-col :span="2" class="text-center">
                        <span class="text-gray-500">分钟</span>
                      </el-col>
                    </el-form-item>
                    <el-form-item label="用户描述">
                      <el-input v-model="formuser.desc" type="textarea"  :rows="4"/>
                    </el-form-item>

                    <el-form-item>
                      <el-button type="primary" @click="onSubmit">登录</el-button>
                      <el-button>取消</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
              <div v-show="activeIndex === 1" class="yunDiv">
                <div class="yunxing">
                  <span>当前运行模式：</span>
                  <div class="ml5">
                    <el-button
                      v-for="(btn, index) in buttony"
                      :key="index"
                      :type="btn.type"
                      @click="updateButtonType(index)"
                    >
                      {{ btn.text }}
                    </el-button>
                  </div>
                  <span class="ml5">喷淋时间设定：</span>
                  <el-input v-model="aaa" style="width: 12rem;"></el-input>
                  <span class="ml5">秒</span>
                </div>
                <div class="dateList">
                  <div class="dateOne" v-for="(item, index) in 24" :key="index">
                    <div><span>{{ index }}:</span><div class="ml2 padding2" contenteditable="true">00</div>分</div>
                    <div class="mt2"><el-button type="info">启动/不启动</el-button></div>
                  </div>
                </div>
              </div>
              <div v-show="activeIndex === 2">
                <el-table :data="tableShe"  >
                  <el-table-column property="xh" label="日期"  width="100"></el-table-column>
                  <el-table-column property="shijian" label="时间" ></el-table-column>
                  <el-table-column property="bianhao" label="对象名" ></el-table-column>
                  <el-table-column property="person" label="报警值" ></el-table-column>
                  <el-table-column property="dep" label="报警概述"></el-table-column>
                </el-table>
              </div>
              <div v-show="activeIndex === 3" class="uDiv">
                  <div class="dataTop">
                      <div>
                          <span>当前时间：</span>{{ currentTime  }}
                      </div>
                      <div>
                          <span>时间校准：</span>
                          <el-date-picker
                            v-model="value1"
                            type="datetime"
                            placeholder="请选择校准时间"
                          />
                      </div>
                    <div >
                          <span>上次运行时间：</span>
                          <em>2024年3月04日15时20秒</em>
                      </div>
                  </div>
                  <div class="userLogin">
                      <span >
                        当前登录用户：
                      </span>
                    <el-input style="width: 12rem;"></el-input>
                    <el-button type="info" class="ml5">用户退出</el-button>
                    <el-button type="info" class="ml5">用户密码修改</el-button>

                  </div>
              </div>
            </div>
            <div class="videoList">
              <el-button
                v-for="(btn, index) in buttons"
                :key="index"
                :type="activeIndex === index ? 'primary' : 'info'"
                @click="showDiv(index)"
              >
                {{ btn }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import * as Cesium from 'cesium';
const cesiumAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlZjRjOGQwNy1iODM1LTQzNTEtYTFkZS1lMWQ2NTM3Zjk5ZGMiLCJpZCI6MjA0NDM5LCJpYXQiOjE3MTE0MTYyNjV9.7fi9z31YPkF29lSSrvYpWaGLqoR6FiexnXkACPbP8sc";
const apiKey =  "AAPK9afd0a76a6aa4b9ab6731982a53d10b2ZIWCKoYT1Lo7dDGOMi5xjcY7TIBkpfvmPkyV7_ZNYpr0b-0JOl4Gencs8EVb2aXy"; // 替换为你的 API 密钥
export default {
  name: "luans",
  components: {
  },
  data() {
    return {
      value1:'',
      currentTime:'',
      activeName:'first',
      name:"业光",
      tel:"13462134567",
      date:"2024-01-01",
      status:'正常',
      value:"",
      options: [{
        value: '1',
        label: '格雷1'
      }, {
        value: '2',
        label: '格雷2'
      }, {
        value: '3',
        label: '格雷3'
      }, {
        value: '4',
        label: '格雷4'
      }],
      area:'12',
      numTotal:'3',
      jianNum:'3',
      videoShow:false,
      chuShow:false,
      kongShow:false,
      animation: true,
      timeline: true,
      baseLayerPicker: false,
      fullscreenButton: true,
      infoBox: true,
      fullscreenElement: document.body,
      tk: '436ce7e50d27eede2f2929307e6b33c0',
      activeIndex: 4, // 初始显示第一个 div
      buttons: ['用户登录', '运行设置', '报警记录', '系统设置'], // 按钮文字数组
      buttony: [ { text: '自动', type: 'success' },
        { text: '手自动切换', type: 'info' },
        { text: '启动', type: 'info' },
        { text: '停止', type: 'info' }], // 按钮文字数组
      formuser:{
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      aaa:"",
      arcgisUrl: 'https://tiles.arcgis.com/tiles/isEbfhhM3nXXcWNI/arcgis/rest/services/test/VectorTileServer?token=AAPK4de88168768b44af8619b2bc3df5cd86Udf7Obgj-5Bgg8Yw_kNHCgLtsX8TVuIuW-KQvI6DFf-it8FDzF3WnmWZaYliD6So',

      arcgisSceneUrl: 'https://tiles.arcgis.com/tiles/isEbfhhM3nXXcWNI/arcgis/rest/services/test2/SceneServer?=AAPK4de88token168768b44af8619b2bc3df5cd86Udf7Obgj-5Bgg8Yw_kNHCgLtsX8TVuIuW-KQvI6DFf-it8FDzF3WnmWZaYliD6So',
      tilesetAsset: {
        version: '1.0',
        tilesetVersion: '1.0',
        asset: {
          version: '1.0',
        },
      },
      stations:[
        {
          name:'中关村医疗器械园',
          value: '1',
          lng:'116.27',
          lat:'39.68',
        },
        {
          name:'北京军民结合产业园',
          value: '2',
          lng:'116.58',
          lat:'39.70',
        },{
          name:'格雷众创园',
          value: '3',
          lng:'116.35',
          lat:'39.76',
        },
      ],
      tableShe:[
        {
          xh:'1',
          shijian: '2024-03-03',
          bianhao:'垃圾桶',
          person:'100L',
          dep:'垃圾桶已满',
        },{
          xh:'2',
          shijian: '2024-03-03',
          bianhao:'消毒液',
          person:'10ml',
          dep:'缺少消毒液',
        },

      ],
    };
  },
  mounted() {
    this.initMap();

    this.updateTime();
    // 每秒钟更新一次时间
    setInterval(this.updateTime, 1000);
  },

  methods: {
    updateTime() {
      // 获取当前时间并格式化
      const now = new Date();
      // 获取年、月、日、时、分、秒
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, '0'); // 月份从 0 开始，需要加 1
      const day = now.getDate().toString().padStart(2, '0');
      const hours = now.getHours().toString().padStart(2, '0');
      const minutes = now.getMinutes().toString().padStart(2, '0');
      const seconds = now.getSeconds().toString().padStart(2, '0');
      // 记录当前日期和时间
      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    handleClick(){

    },
    //按钮点击
    showDiv(index) {
      this.activeIndex = index;
    },

    onSubmit(){

    },
    //当前运行选择
    updateButtonType(clickedIndex) {
      this.buttony.forEach((btn, index) => {
        if (index === clickedIndex) {
          btn.type = 'success'; // 点击的按钮类型设置为 success
        } else {
          btn.type = 'info'; // 其他按钮类型设置为 info
        }
      });
    },


    //搜索下拉选择事件
    handleChange(value) {
      // 处理选择变化的逻辑，这里的 value 参数就是用户选择的值
      console.log('选择的值：', value);
    },
    //隐藏弹框
    hiddenTan(){
      this.videoShow = false;
      this.chuShow = false;
      this.kongShow = false;
    }, //隐藏弹框
    videoClick(){
      this.videoShow = true;
    },
    chaiClick(){
      this.chuShow = true;
    },

    //控制系统操作
    kongzhi(){
      this.kongShow = true;
    },


    async initMap() {
      Cesium.Ion.defaultAccessToken = cesiumAccessToken;
      Cesium.ArcGisMapService.defaultAccessToken = apiKey;
      const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);
      //创建 Cesium 地球对象
      const viewer = new Cesium.Viewer('cesiumContainer', {
        animation: false, // 不显示动画控制器
        baseLayerPicker: false, // 不显示图层选择器
        fullscreenButton: false, // 不显示全屏按钮
        geocoder: false, // 不显示地理编码器
        homeButton: false, // 不显示返回初始位置按钮
        infoBox: false, // 不显示信息框
        sceneModePicker: false, // 不显示场景模式选择器
        selectionIndicator: false, // 不显示选择指示器
        timeline: false, // 不显示时间轴
        baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),

      });
   
    // 等待地球完全加载后再添加图层

    await viewer.scene.globe.tilesLoaded;
   // 将视角定位到指定坐标点
    const destination = Cesium.Cartesian3.fromDegrees(116.3455000, 39.7596573, 8); // 你的目标坐标点
      const heading = Cesium.Math.toRadians(0); // 朝向北方（0度）
      const pitch = Cesium.Math.toRadians(-20); // 俯仰角，根据你的需求调整
      const roll = 0; // 翻滚角，通常设置为0
      viewer.camera.setView({
        destination: destination,
        orientation: {
          heading: heading,
          pitch: pitch,
          roll: roll
        },

      });


      // const GLmap = Cesium.ArcGisMapServerImageryProvider.fromUrl("https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer/", {
      //   token:apiKey,
      //   fileExtension: 'pbf',
      //   credit: 'Basemap © ArcGIS'
      //  });
      // viewer.scene.imageryLayers.add(
      // Cesium.ImageryLayer.fromProviderAsync(GLmap)
      // );

      const GLRoad = Cesium.ArcGisMapServerImageryProvider.fromUrl("https://tiles.arcgis.com/tiles/isEbfhhM3nXXcWNI/arcgis/rest/services/GLRoad/MapServer", {
        token:apiKey,
       });      
      viewer.scene.imageryLayers.add(
      Cesium.ImageryLayer.fromProviderAsync(GLRoad)
      );
      // addI3SLayer();
      // async function addI3SLayer() {
      //   try {
      //     // 加载高程服务
      //     const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/EGM2008/ImageServer");
      //
      //     // 加载I3S图层
      //     const i3sLayer = "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_3DObjects_1_7/SceneServer";
      //     const i3sProvider = await Cesium.I3SDataProvider.fromUrl(i3sLayer, {
      //       geoidTiledTerrainProvider: geoidService,
      //       token: apiKey
      //     });
      //
      //     // 将加载的I3S图层添加到场景中
      //     viewer.scene.primitives.add(i3sProvider);
      //
      //     // 设置相机初始位置
      //     viewer.camera.setView({
      //       destination: destination,
      //       orientation: {
      //         heading: heading,
      //         pitch: pitch,
      //         roll: roll
      //       }
      //     });
      //   } catch (error) {
      //     console.error("Error loading I3S layer:", error);
      //   }
      // }







    
      // 创建实体并添加到地图上
      // viewer.entities.add({
      //   position: destination,
      //   model: {
      //     // 引入模型
      //     uri: '../../../src/assets/LJZ.glb',
      //     // 模型的近似最小像素大小，而不考虑缩放。这可以用来确保即使观看者缩小也可以看到模型。如果为0.0，则不强制使用最小大小
      //     minimumPixelSize: 1280,
      //     // 模型的颜色（与模型的渲染颜色混合的属性）
      //     color: Cesium.Color.WHITE.withAlpha(1),
      //     // 模型的最大比例大小
      //     maximumScale: 20000,
      //     // 设置模型轮廓（边框）颜色
      //     silhouetteColor: Cesium.Color.BLACK,
      //     // 设置模型轮廓（边框）大小
      //     silhouetteSize: 2,
      //     // 是否执行模型动画
      //     runAnimations: false,
      //     // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
      //     scale: 1.0,
      //     // 显示在距相机的距离处的属性，多少区间内是可以显示的
      //     distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500),
      //     // 是否显示
      //     show: true
      //   }
      // });


      try {
        const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(2543596);
        viewer.scene.primitives.add(tileset);
        // await viewer.zoomTo(tileset);

        // Apply the default style if it exists
        const extras = tileset.asset.extras;
        if (
          Cesium.defined(extras) &&
          Cesium.defined(extras.ion) &&
          Cesium.defined(extras.ion.defaultStyle)
        ) {
          tileset.style = new Cesium.Cesium3DTileStyle(extras.ion.defaultStyle);
        }
      } catch (error) {
        console.log(error);
      }


      try {

        const tileset2 = await Cesium.Cesium3DTileset.fromIonAssetId(2543216, {
          //This tileset doesn't have a location, so we're using a modelMatrix to place it at 0, 0 instead of drawing at the center of the earth
          modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(
            Cesium.Cartesian3.fromDegrees(116.3454876, 39.7598200,0.8),
          ),

        });
        viewer.scene.primitives.add(tileset2);
        // await viewer.zoomTo(tileset2);

        // Apply the default style if it exists
        const extras = tileset2.asset.extras;
        if (
          Cesium.defined(extras) &&
          Cesium.defined(extras.ion) &&
          Cesium.defined(extras.ion.defaultStyle)
        ) {
          tileset2.style = new Cesium.Cesium3DTileStyle(extras.ion.defaultStyle);
        }
      } catch (error) {
        console.log(error);
      }


    },
  }
};
</script>

<style scoped lang="scss">
  .luans{
    position: fixed;
    width: 100%;
    height: 100%;
    padding: 1rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    ul li{
      list-style: none;
    }
    .contentDiv{

      position: absolute;
      width: 80%;
      left: 18%;
      top: 7%;
      .topDiv{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        .leftDiv{
          .stationName{
            font-size: 1.625rem;
          }
          .lefttop{
            display: flex;
            div{
              margin-left: 1.5rem;
              background: rgba(2,137,255,0.27);
              border-radius: 5px;
              border: 1px solid #0289FF;
              width: 8rem;
              display: flex;
              justify-content: space-evenly;
              align-items: center;
              cursor: pointer;
              img{
                width: 1.3rem;
              }
            }
          }
          .bottomSession{
            p{
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 1.25rem;
            }
            .sessionC{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 1rem;
              span{
                color: #01FFFF;
                margin-right: 1rem;
              }
            }
          }
        }

      }
      .bottomDiv{
        display: flex;
        .stationS{
          width:70%;
          height:37.5rem;
          display: flex;
          align-items: center;
          justify-content: center;
          div{
            width: 100%;
            height: 100%;
          }
        }
        .stationDetail{
          width: 30%;
          padding: 3rem;
          .jz{
            justify-content: center;
            .backDetail{
              background-image: url("../../assets/images/detailkuang.png");
              background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
              background-repeat: no-repeat; /* 不重复平铺 */
              padding: 0.5rem;

            }
            .deStation{
              font-family: HYYaKuHei, HYYaKuHei;
              font-weight: normal;
              font-size: 1.5rem;
              height: 3rem;
              background-image: url("../../assets/images/detail.png");
              background-size: contain; /* 背景图片铺满并保持比例不变 */
              background-repeat: no-repeat; /* 不重复平铺 */
              margin: 0; /* 去除默认的外边距 */
              padding: 0.2rem 0rem 0 2.5rem; /* 去除默认的内边距 */
              display: flex;
              align-items: center;

            }
            .jichu{
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              color: #FFFFFF;
              span{
                font-size: 1.2rem;
              }
              p:nth-of-type(1),p:nth-of-type(2){
                font-size:1rem;
              }

            }
            .sessDiv{
              display: flex;
              flex-wrap: wrap;
              .firstDiv{
                width: 48%;
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                margin: 1%;
                img{
                  width: 2.8rem;
                  height: 2.8rem;
                }
                div span{
                  line-height: 1.8rem;
                }
              }

            }
          }



        }
      }
    }

    .colorS{
      color: #01FFFF;
    }
    .h100{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;


      .tanDiv{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: #081F31;
        z-index: 222;
        opacity: 0.8;
      }


      .diaStyle{
        /* 修改弹框样式 */
        position: relative;
        width: 69rem;
        height: 32.7rem;
        background-image: url("../../assets/images/tankuang.png");
        background-size: contain; /* 背景图片铺满并保持比例不变 */
        background-repeat: no-repeat; /* 不重复平铺 */
        background-position: center; /* 图片居中对齐 */
        padding: 2rem 3rem;
        z-index: 333;

        .xx{
          width: 2rem;
          height: 2rem;
          position: absolute;
          top: -1rem;
          right: -1rem;
          cursor: pointer;
          img{
            width: 100%;
            height: 100%;
          }
        }

        .xxDiv{

          display: flex;

          .videoDiv{
            width: 75%;
            height: 28rem;
            padding: 1rem;
            video{
              width: 100%;
              height: 100%;
            }
          }

          .videoList{
            width: 25%;
            height: 28rem;
            padding: 0.5rem;
            overflow-y: auto;
            ul li{
              cursor: pointer;
              width: 9.5rem;
              height: 5.6rem;
              margin: 0.5rem;
              img{
                width: 100%;
                height: 100%;
              }
            }
          }

        }





      }
    }

    .h101{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .tanDiv{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: #081F31;
        z-index: 222;
        opacity: 0.8;
      }
      .diaStyle{
        /* 修改弹框样式 */
        position: relative;
        width: 69rem;
        height: 35rem;
        background-image: url("../../assets/images/tantan.png");
        background-size: contain; /* 背景图片铺满并保持比例不变 */
        background-repeat: no-repeat; /* 不重复平铺 */
        background-position: center; /* 图片居中对齐 */
        padding: 2rem 3rem;
        z-index: 333;

        .xx{
          width: 2rem;
          height: 2rem;
          position: absolute;
          top: -1rem;
          right: -1rem;
          cursor: pointer;
          img{
            width: 100%;
            height: 100%;
          }
        }

        .xxDiv{
          padding:3rem 5rem;
          .videoDiv{
            width: 100%;
            height: 24rem;
            padding: 1rem;
            .logopage{
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              color: #000000;
              text-align: center;
              .titleSize{
                font-size: 2.5rem;
                margin-top: 4rem;
              }
              .titleC{
                margin-top: 1rem;
                font-size: 1rem;
              }
            }
            .userlogin{
              display: flex;
              .aviter{
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                span{
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 500;
                  font-size: 1.2rem;
                  margin-left: 10px;
                  color: #000000!important;
                }
              }
              .aviterSession{
                flex: 2;
              }
            }
            .yunDiv{
              .yunxing{
                display: flex;
                align-items: center;
                span{
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 500;
                  font-size: 1rem;
                  color: #000000;
                }
              }
              .dateList{
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                .dateOne{
                  width: 16%;
                  margin: 0.5rem 0.1rem;
                  cursor: pointer;
                  div:nth-of-type(1){
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 1rem;
                    color: #000000;
                    display: flex;
                    align-items: center;
                    justify-content:center;
                    .padding2{
                      padding: 0 0.5rem;
                    }
                    div{
                      background: rgba(1,175,255,0.2);
                      border-radius: 3px;
                      border: 1px solid #0289FF;
                    }
                  }
                }
              }
            }

            .uDiv{
              .dataTop{
                padding: 1rem;
                border-bottom: 1px solid #01B0FF;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 1.2rem;
                color: #000000;
                div{
                  margin-top: 1rem;
                }
                span{
                  display: inline-block;
                  width: 9rem;
                }
              }
              .userLogin{
                padding: 2rem 1rem;
                  span{
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 1.2rem;
                    color: #000000;
                  }
              }
            }
          }

          .videoList{
            width: 100%;
            height: 3rem;
            padding: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
          }

        }





      }
    }


  }


</style>

